<template>
    <view class="patientSelect">
       <view class="patientSelect_header">
       	 {{title}}
       </view>
	   <view class="patientSelect_dec">
	   	您的账号({{patientArr[0].patientPhone}})下有{{patientArr.length}}个就诊人
	   </view>
	   <view class="patientSelect_containers">
		   <view class="patientSelect_containers_item display_flex" v-for="(item, index) in patientArr" :class="checkmarkIndex==index?'active':''"
	   	        :key="index"  @tap="radioChange(item.patientId,index)">
		   	    <view class="patientSelect_containers_item_label">
		   	    	<view class="checkmark" >
		   	    		 <u-icon name="checkmark" color="#49B9AD" size="28" v-if="checkmarkIndex==index"></u-icon>
		   	    	</view>
					
		   	    </view>
				<view class="patientSelect_containers_item_label">
					<view class="patientSelect_containers_item_label_title">
						姓名：{{item.patientName}}
					</view>
					<view class="patientSelect_containers_item_label_title">
						身份证：{{item.idNum}}
					</view>
					
				</view>
		   </view>
	 
	   </view>


    </view>
</template>

<script>
    import storage from '@/common/storage'
    export default {
        name: 'patientSelect',
        props: {
			title: {
			    type: String, // 1 ‘首页   2我的顾客码  3 预约页面
			    default: '选择就诊人'
			},
           patientArr: {
                type:[Array,Object], 
                default: []
            }
            
        },
        data() {
            return {
              radiovalue:'',
              checkmarkIndex:undefined

            }
        },
        computed: {

        },
        watch: {

        },
        onLoad() {

        },
        created() {
           
        },
        mounted() {
           
        },
        methods: {
			getLabel(item){
			   return '姓名：'+ item.patientName+'('+item.idNum+')'	
			},
            // groupChange(n) {
            //         console.log('groupChange', n);
            //       },
            radioChange(n,index) {
				this.checkmarkIndex=index
                // console.log('radioChange', n);
				this.$emit('comfirm',n)
            }
        }
    }
</script>
<style lang="scss" scoped>
	.checkmark{
		
		width:40rpx;
		height:40rpx;
		border-radius: 40rpx;
		margin-right:10rpx;
		text-align: center;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid $uni-text-color-placeholder;
	}
	.patientSelect_containers_item{
		margin:20rpx 0rpx;
	}
	.patientSelect_containers_item.active{
		
		color:$uni-color-main;
		.checkmark{
			border: 2rpx solid $uni-color-main;
		}
	}
	
	.patientSelect{
		width:600rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		padding:40rpx 30rpx;
		&_header{
			height:50rpx;
			line-height: 50rpx;
			font-size: 34rpx;
			text-align: center;
		}
		&_dec{
			color:$uni-text-color-placeholder;
			font-size:28rpx;
			line-height: 40rpx;
			margin-top:20rpx;
		}
		&_containers{
			padding:20rpx 0rpx;
			max-height:800rpx;
			overflow-y: auto;
		}
	}
    
</style>
